<template>
  <div class="page has-navbar" v-nav="{title: '畅销颜色', showBackButton: true}">
    <div class="page-content padding-top">
      <div class="date-box">
        <input type="date" v-model="startDate" name="" @change="initData">
        <span>至</span>
        <input type="date" v-model="endDate" name="" @change="initData">
      </div>
      <div class="show-warp">
        <div class="show-list">
          <div class="show-box">
            <div id="colorDetialDom"></div>
            
          </div>
        </div>
        <table class="show-table">
          <thead>
            <tr>
              <th>排序</th>
              <th>品牌</th>
              <th>销量</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(re,index) in res">
              <td>{{index + 1}}</td>
              <td>{{re.carColor}}</td>
              <td>{{re.saleNum}}</td>
            </tr>
          </tbody>
          
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
  name: 'brandDetial',
  data () {
    return {
      res:null,
      startDate:'',
      endDate:'',
      pageSize:15,

      colorCharts:null,
      colorDataArr:[],
    }
  },
  created(){
    // 基于准备好的dom，初始化echarts实例
    // console.log()
    var myDate = new Date();
    var y = myDate.getFullYear();
    var m = (myDate.getMonth()+1)>9?(myDate.getMonth()+1).toString():'0' + (myDate.getMonth()+1);
    console.log(myDate.getDate())
    var d = myDate.getDate()>9?myDate.getDate().toString():'0' + myDate.getDate()
    this.endDate = y+'-'+m+'-'+d;

    myDate.setMonth(myDate.getMonth()-3);
    var y = myDate.getFullYear();
    var m = (myDate.getMonth()+1)>9?(myDate.getMonth()+1).toString():'0' + (myDate.getMonth()+1)
    var d = myDate.getDate()>9?myDate.getDate().toString():'0' + myDate.getDate()
    this.startDate = y+'-'+m+'-'+d;

    this.initData();

    
  },
  mounted(){
    var color= ['#f56e6d', '#ffaa07', '#3186dc', '#43d7e0','#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
    this.colorCharts = echarts.init(document.getElementById('colorDetialDom'));
    // 绘制图表
    this.colorCharts.setOption({
        // title: { text: 'ECharts 入门示例' },
        tooltip: {},
        series: [{
            name: '销量',
            type: 'pie',
            data: [],
            // roseType: 'radius',
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }],
        color:color
    });

  },
  methods:{
    initData(){
      var colorDataArr = [];
      var _this = this;
      axios.get(baseUrl+'/controller/statis/getColorRank',{params:{
          marketId:sess.get('showMarketId'),
          startDate:this.startDate,
          endDate:this.endDate,
          pageSize:this.pageSize,
        }
      })
      .then((response)=>{
          _this.res = response.data.result;
          
          for (var i = 0; i < _this.res.length; i++) {
            colorDataArr.push({value:_this.res[i].saleNum,name:_this.res[i].carColor});
          }
          _this.colorCharts.setOption({
            series: [{
                data: colorDataArr
            }],

          });
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show-warp{
  padding: 1rem;
  /*background-color: #f3f3f3;*/
}
.show-list{
  margin-bottom: 10px;
}
.show-title{
  line-height: 35px;
  font-size: 14px;

}
.show-box{
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
}
.show-box p{
 text-align: right;
 line-height: 30px;
 
}
.show-box p a{
 text-decoration: none;
 font-size: 12px;
 color:#989898;
 /*background-image: url(../../static/images/arrow-r@3x.png);*/
 background-repeat: no-repeat;
 background-size: 12px;
 background-position: 100% 44%;
 padding-right: 15px;
 display: inline-block;

}

#colorDetialDom{
  height: 30rem;

}

table{
  border-collapse: collapse;
  width: 100%;
  border: 0;
  margin: 20px 0;
}
table td,th{border: 1px solid #e1e1e1;}
table th{
  background-color: #fff0e7;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  color: #ff6816;
}
table td{
  /*background-color: #fff0e7;*/
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  color: #323232;
  text-align: center;
  background-color: #fff;
}
</style>




























